<!-- 我的订单  郭沛东 20点55分 -->
<template>
	<view class="MyOrder">
		<!-- 搜索订单单号或者订单商品 -->
		   <input
			  style="width: 70%;height: 20px;float: left;"
			  border="bottom"
		      placeholder="请输入商品名称或者订单号"
		      v-model="myOrderValue"
		    ></input>
			<button @click="getSelectOrderList()"   size="mini" style="width: 30%;height: 30px;float: left;">订单搜索</button>
		<!-- 订单状态栏 -->
		<u-subsection :list="listData" :current="curNow" @change="sectionChange"></u-subsection>
		<view class="" v-for="(item,index) in orderList" :key="index">
			<!-- 商品订单模板 -->
			<view class="myorder_orderBody" v-if="item.orderTypeId==1">
				<view class="myorder_orderTop">
					<p style="font-size: 12px;float:left;font-weight: bold;">{{item.createTime|formatDate('yyyy-MM-dd')}}</p>
					<p style="margin-left: 8px;font-size: 12px;float:left;font-weight: bold;">订单号:{{item.orderNumber}}</p>
				</view>
				<view style="width: 120px;margin-left: 160px;float: left;font-weight: bold;" v-if="item.status=='未付款' && item.time!==''">
					<u-count-down :time="item.time" format="mm:ss" ></u-count-down>
				</view>
				<p v-if="item.status=='未付款' && item.time!==''" style="margin-left: 20px;color: #D88156;float: left;">{{item.status}}</p> 
				<p v-if="item.time==''" style="margin-left: 280px;color: #D88156;float: left;">{{item.status}}</p> 
				<view style="width: 100%;float: left;">
					<image class="myorder_orderImage" :src='`http://101.43.223.224:8765/image/getImageById?id=${item.imageId-0}`'></image>
					<view class="MyOrder_orderName">
						<p style="font-size: 12px;margin-top: 8px;font-weight: bold;">{{item.commodityName}}</p>
					</view>
					<view class="Myorder_moeny">
						<p>￥{{item.favorablePrice}}</p>
					</view>
					<view class="Myorder_quantity">
						<p style="font-size: 14px;font-weight: bold;">x{{item.commodityQuantity}}</p>
					</view>
				</view>
				
				<p style="font-size: 18px;font-weight: bold;margin-left: 62%;width: 160px;height: 30px;float: left;">实付款￥{{item.commodityQuantity*item.favorablePrice}}</p>
				
				<button v-if="item.status=='未付款'" style="width: 100px;margin-left: 60px;float: left;" type="primary"  size="mini" shape="circle" >去付款</button>
				<button v-if="item.status=='已付款'" style="width: 100px;margin-left: 140px;float: left;" type="primary"  size="mini" shape="circle" >催发货</button>
				<button v-if="item.status=='已发货'" style="width: 100px;margin-left: 140px;float: left;" type="primary" size="mini"  shape="circle">确认收货</button>
				<button v-if="item.status=='待评价'" style="width: 100px;margin-left: 140px;float: left;" type="primary" size="mini" shape="circle"
				 @click="toCommodityCommentPage(item.commodityId,item.id)">待评价</button>	
				<button @click="Details(item)" style="width: 100px;margin-left: 14px;float: left;" type="primary" size="mini" shape="circle" >查看详情</button>
				<button v-if="item.status=='未付款'" style="width: 100px;margin-left: 10px;float: left;" type="warn"  size="mini" shape="circle" @click="cancelOrder(item.orderNumber)">取消订单</button>
				<u-popup :show="commodityShow" @close="close" mode="center" :round="10" overlay:true>
					<view style="width:300px;height: 300px;">
						<p style="font-size: 12px;font-weight: bold;margin-top: 12px;margin-left: 6px;">商品名称：<span>{{commodityList.commodityName|ellipsisTitle}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">商品数量：<span>{{commodityList.commodityQuantity}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">商品价钱：<span style="color:red;">￥{{commodityList.favorablePrice}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">实付款：<span style="color:red;">￥{{commodityList.favorablePrice*commodityList.commodityQuantity}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">收货信息：<span style="font-size: 12px;font-weight: bold;">{{commodityList.address}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">订单号：<span style="font-size: 10px;">{{commodityList.orderNumber}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">收货人：<span>{{commodityList.addressConsignee}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">订单状态：<span style="color:red;">{{commodityList.status}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">创建时间：<span style="color:red;">{{commodityList.createTime}}</span></p>
					</view>
				</u-popup>
			</view>
			<!-- diy商品模板 -->
			<view class="myorder_diyOrderBody" v-if="item.orderTypeId==2">
				<view class="myorder_diyOrderTop">
					<p style="font-size: 12px;float:left;font-weight: bold;">{{item.createTime|formatDate('yyyy-MM-dd')}}</p>
					<p style="margin-left: 8px;font-size: 12px;float:left;font-weight: bold;">订单号:{{item.orderNumber}}</p>
				</view>
				<p style="margin-left: 280px;color: #D88156;">{{item.status}}</p>
				<image class="myorder_orderImage" :src='`http://101.43.223.224:8765/image/getImageById?id=${item.diyImageId-0}`'></image> 
				<view class="MyOrder_orderName">
					<p style="font-size: 12px;margin-top: 8px;font-weight: bold;">{{item.diyName}}</p>
				</view>
				<view class="Myorder_moeny">
					<p>￥{{item.diyPrice}}</p>
				</view>
				<view class="Myorder_quantity">
					<p style="color: #A8A8A8;font-size: 14px;font-weight: bold;">x{{item.handworkDiyQuantity}}</p>
				</view>
				<p style="font-size: 18px;font-weight: bold;margin-left: 62%;width: 160px;height: 30px;float: left;">实付款￥{{item.handworkDiyQuantity*item.diyPrice}}</p>
				<button v-if="item.status=='未付款'" style="width: 100px;margin-left: 60px;float: left;" type="primary" size="mini" shape="circle" >去付款</button>
				<button v-if="item.status=='已付款'" style="width: 100px;margin-left: 140px;float: left;" type="primary" size="mini" shape="circle" >催发货</button>
				<button v-if="item.status=='已发货'" style="width: 100px;margin-left: 140px;float: left;" type="primary" size="mini" shape="circle" >确认收货</button>
				<button @click="toCommodityComment()" v-if="item.status=='待评价'" style="width: 100px;margin-left: 140px;float: left;" type="primary" size="mini" shape="circle"></button>
				<button @click="Details(item)" style="width: 100px;margin-left: 14px;float: left;" type="primary" size="mini" shape="circle" >查看详情</button>
				<button v-if="item.status=='未付款'" style="width: 100px;margin-left: 10px;float: left;" type="warn"  size="mini" shape="circle" @click="cancelDiyOrder(item.orderNumber)">取消订单</button>
				<button @click="Details(item)" style="width: 100px;margin-left: 14px;float: left;" type="primary" size="mini" shape="circle">去评论</button>
				<u-popup :show="diyCommoidyShow" @close="close" mode="center" :round="10" overlay:true>
					<view style="width:300px;height: 300px;">
						<p style="font-size: 14px;font-weight: bold;margin-top: 8px;margin-left: 6px;">商品名称：<span style="font-size: 8px;">{{diyCommodityList.diyName|ellipsisTitle}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">商品数量：<span>{{diyCommodityList.handworkDiyQuantity}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">商品价钱：<span style="color:red;">￥{{diyCommodityList.diyPrice}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">实付款：<span style="color:red;">￥{{diyCommodityList.handworkDiyQuantity*diyCommodityList.diyPrice}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">收货信息：<span style="font-size: 12px;font-weight: bold;">{{diyCommodityList.address}}</span></p>
						<p style="font-size: 10px;font-weight: bold;margin-top: 12px;margin-left: 6px;">订单号：<span>{{diyCommodityList.orderNumber}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">收货人：<span>{{diyCommodityList.addressConsignee}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">订单状态：<span style="color:red;">{{diyCommodityList.status}}</span></p>
						<p style="font-size: 14px;font-weight: bold;margin-top: 12px;margin-left: 6px;">创建时间：<span style="color:red;">{{diyCommodityList.createTime}}</span></p>
					</view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
import { methods } from '../../uni_modules/uview-ui/libs/mixin/mixin';
	export default {
		data(){
			return{
				val:'',
				name:'待发货',
				// 用于存放商品名称或者订单单号 用于查询
				myOrderValue:'',
				// 配送状态默认展示index为0的数据
				curNow: 0,
				// 订单状态数组
				listData:[
					{
						id:0,
						name :'所有订单'
					},
					{
						id:1,
						name :'待付款'
					},
					{
						id:2,
						name :'待发货'
					},
					{
						id:3,
						name :'待收货'
					},
					{
						id:9,
						name :'待评价'
					},
				],
				// 查询订单的结果集合
				orderList:[],
				// 查询点击订单状态订单结果集合
				orderStatusList:[],
				// 商品详细弹出层默认false
				commodityShow:false,
				// diy商品详情弹出层默认false
				diyCommoidyShow:false,
				// 用于商品详情赋值
				commodityList:{
					commodityName:'',
					commodityQuantity:'',
					favorablePrice:'',
					orderNumber:'',
					createTime:'',
					status:'',
					addressConsignee:'',
					address:'',
				},
				// 用于diy商品详情赋值
				diyCommodityList:{
					diyName:'',
					diyPrice:'',
					handworkDiyQuantity:'',
					orderNumber:'',
					createTime:'',
					status:'',
					address:'',
					addressConsignee:'',
				},
				// 存放登录成功后的结果
				user:'',
				// 存放登录成功后的用户id
				userId:'',
				time:'',
			}
		},
		methods:{
			toCommodityCommentPage(commodityId,orderId){
				uni.navigateTo({
					url:"/pages/goods/CommodityCommentView?commodityId="+commodityId
					+"&orderId="+orderId
				})
			},
			// 点击订单详情时
			Details(item){
				if(item.orderTypeId==1){
					this.commodityList.addressConsignee = item.addressConsignee
					this.commodityList.address = item.address
					this.commodityList.commodityName = item.commodityName
					this.commodityList.commodityQuantity = item.commodityQuantity
					this.commodityList.favorablePrice = item.favorablePrice
					this.commodityList.orderNumber = item.orderNumber
					this.commodityList.createTime = item.createTime
					this.commodityList.status = item.status
					this.commodityShow = true
				}
				else{
					this.diyCommodityList.addressConsignee = item.addressConsignee
					this.diyCommodityList.address = item.address
					this.diyCommodityList.diyName = item.diyName
					this.diyCommodityList.diyPrice = item.diyPrice
					this.diyCommodityList.handworkDiyQuantity = item.handworkDiyQuantity
					this.diyCommodityList.orderNumber = item.orderNumber
					this.diyCommodityList.createTime = item.createTime
					this.diyCommodityList.status = item.status
					this.diyCommoidyShow = true
				}
			},
			// 关闭商品详情弹窗
			close(){
				this.commodityShow = false
				this.diyCommoidyShow = false
			},
			sectionChange(index) {
				this.curNow = index;
				if(this.curNow==4)
					this.curNow+=5
				if(this.curNow == 0)
					// 初始化查询我的所有订单
					this.getMyAllOrder()
				// 点击订单状态进行查询
				this.getStatusToOrder()
				
			},
			// 点击订单状态进行查询
			getStatusToOrder(){
				this.$myRequest({
					url:'/order/getStatusToOrder',
					data:{
						status:this.curNow,
						userId:this.userId
					}
				}).then(res=>{
					this.orderList = res.data.data
					for(var i =0;i<this.orderList.length;i++){
						// 如果当前时间大于过期时间就不将倒计时时间存入time中
						if(new Date().getTime()>new Date(this.orderList[i].expirationTime).getTime()){
							this.orderList[i].time=''
						}
						else{
							this.time = new Date(this.orderList[i].expirationTime).getTime()-new Date().getTime()
							this.orderList[i].time=this.time
						}
					}
				})
			},
			// 搜索查询用户订单信息
			getSelectOrderList(){
				this.$myRequest({
					url:'/order/getSelectOrderList',
					data:{
						myOrderValue:this.myOrderValue,
						userId:this.userId,
					},
				}).then(res=>{
					this.orderList = res.data.data
				})
			},
			// 初始化查询我的所有订单
			getMyAllOrder(){
				this.$myRequest({
					url:'/order/getMyAllOrder',
					data:{
						userId:this.userId
					}
				}).then(res=>{
					this.orderList = res.data.data
					for(var i =0;i<this.orderList.length;i++){
						// 如果当前时间大于过期时间就不将倒计时时间存入time中
						if(new Date().getTime()>new Date(this.orderList[i].expirationTime).getTime()){
							this.orderList[i].time=''
						}
						else{
							this.time = new Date(this.orderList[i].expirationTime).getTime()-new Date().getTime()
							this.orderList[i].time=this.time
						}
					}
				})
			},
			// 计算倒计时
			methodCountDown (endTime) {
			  const endDate = +new Date(endTime)
			  const now = +new Date()
			  const leaveTime = (endDate - now) / 1000
			  this.leaveTimeHour = parseInt(leaveTime / 60 / 62) % 24
			  this.leaveTimeMin = parseInt(leaveTime / 60) % 60
			  this.leaveTimeSecond = parseInt(leaveTime % 60)
			  // 如果倒计时小于等于0时显示0,并清除定时器
			  if (
				this.leaveTimeHour <= 0 &&
				this.leaveTimeMin <= 0 &&
				this.leaveTimeSecond <= 0
			  ) {
				this.leaveTimeHour = 0
				this.leaveTimeMin = 0
				this.leaveTimeSecond = 0
				this.clearTimer()
			  }
			},
			// 取消diy订单
			cancelDiyOrder(orderNumber){
				this.$myRequest({
					url:'/order/cancelDiyOrder',
					data:{
						orderNumber:orderNumber
					},
					dataType:'json',
					method:'POST'
				}).then(res=>{
					uni.showToast({
						title: '取消diy订单成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
				})
			},
			// 取消商品订单
			cancelOrder(orderNumber){
				this.$myRequest({
					url:'/order/cancelOrder',
					data:{
						orderNumber:orderNumber
					},
					dataType:'json',
					method:'POST'
				}).then(res=>{
					uni.showToast({
						title: '取消订单成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
				})
			},
		},
		onLoad:function (option){
			this.user = wx.getStorageSync("user")
			this.userId = this.user.id
			if(option.curNow == undefined){
				this.curNow = 0
			}
			else{
				this.curNow = option.curNow-0
			}
			if(this.curNow!==0){
				this.getStatusToOrder()
			}else{
				// 初始化查询我的所有订单
				this.getMyAllOrder()
			}
			
		},
		//格式化时间
		filters:{
			// 显示字段超出相应长度后截取 可设置多个
			ellipsis(value) {
			  if (!value) return "";
			  if (value.length > 30) {
				return value.slice(0, 30) + "...";
			  }
			  return value;
			},
			ellipsisTitle(value) {
			  if (!value) return "";
			  if (value.length > 15) {
			  // 截取长度
				return value.slice(0, 15) + "...";
			  }
			  return value;
			},
			formatDate: function(value,args) {
				var dt = new Date(value);
				if(args == 'yyyy-M-d') {// yyyy-M-d
				let year = dt.getFullYear();
				let month = dt.getMonth() + 1;
				let date = dt.getDate();
				return `${year}-${month}-${date}`;
			} else if(args == 'yyyy-M-d H:m:s'){// yyyy-M-d H:m:s
				let year = dt.getFullYear();
				let month = dt.getMonth() + 1;
				let date = dt.getDate();
				let hour = dt.getHours();
				let minute = dt.getMinutes();
				let second = dt.getSeconds();
				return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
			} else if(args == 'yyyy-MM-dd') {// yyyy-MM-dd
				let year = dt.getFullYear();
				let month = (dt.getMonth() + 1).toString().padStart(2,'0');
				let date = dt.getDate().toString().padStart(2,'0');
				return `${year}-${month}-${date}`;
			} else {// yyyy-MM-dd HH:mm:ss
				let year = dt.getFullYear();
				let month = (dt.getMonth() + 1).toString().padStart(2,'0');
				let date = dt.getDate().toString().padStart(2,'0');
				let hour = dt.getHours().toString().padStart(2,'0');
				let minute = dt.getMinutes().toString().padStart(2,'0');
				let second = dt.getSeconds().toString().padStart(2,'0');
				return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
			}
			},
			
		},
		
	}
</script>

<style>
	.MyOrder{
		width: 100%;
		height:812px;
	}
	.MyOrder_orderintroduce{
		width: 100%;
		height: 20px;
		margin-top: 2%;
		background-color: #F5F5F5;
		border: 1px solid #E8E8E8;
	}
	.myorder_orderBody{
		border: 2px solid #DAF3FF;
		width: 96%;
		height: 180px;
		margin-left: 2%;
		margin-top: 2%;
		background-image: url("http://101.43.223.224:8765/image/getImageById?id=826");
	}
	.myorder_diyOrderBody{
		border: 2px solid pink;
		width: 96%;
		height: 180px;
		margin-left: 2%;
		margin-top: 2%;
	}
	.myorder_orderTop{
		background-color: #EAF8FF;
		width: 100%;
		height: 20px;
		
	}
	.myorder_diyOrderTop{
		background-color: pink;
		width: 100%;
		height: 20px;
	}
	.myorder_orderImage{
		margin-left: 4%;
		width: 60px;
		height: 60px;
		float: left;
	}
	.MyOrder_orderName{
		margin-left: 2%;
		margin-top: 1%;
		width: 140px;
		height: 40px;
		float: left;
		overflow: hidden;
	}
	.Myorder_moeny{
		width: 50px;
		height: 20px;
		float: left;
		margin-top: 1%;
		margin-left: 20%;
	}
	.Myorder_quantity{
		width: 20px;
		height: 20px;
		float: left;
		margin-top: 1%;
		margin-left: 24%;
	}
	.Myorder_total{
		width: 40px;
		height: 20px;
		float: left;
		margin-top: 8%;
		margin-left: 2%;
	}
</style>